<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="data-grid-filters-actions-wrap" data-bind="collapsible: {openClass: false, closeOnOuter: false}">
    <div class="data-grid-filters-action-wrap">
        <button
            class="action-default"
            data-action="grid-filter-expand"
            data-bind="
                click: $collapsible.toggle,
                attr: {
                    disabled: !hasVisible(),
                    'title': $t('Filters')
                },
                css: {
                    _active: hasVisible() && $collapsible.opened()
                }"
        >
            <span data-bind="i18n: 'Filters'"></span>
        </button>
    </div>
</div>

<!-- ko scope: chips -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

<div
    class="admin__data-grid-filters-wrap"
    data-bind="css: { _show: hasVisible() && $collapsible.opened() }"
    data-part="filter-form">

    <fieldset class="admin__fieldset admin__data-grid-filters">
        <legend class="admin__filters-legend">
            <span data-bind="i18n: 'Advanced filter'"></span>
        </legend>
        <!-- ko foreach: getRanges() -->
            <fieldset class="admin__form-field" data-bind="visible: $parent.isFilterVisible($data), template: getTemplate()"></fieldset>
        <!-- /ko -->
        <!-- ko foreach: getPlain() -->
            <div class="admin__form-field" data-bind="visible: $parent.isFilterVisible($data), template: getTemplate()"></div>
        <!-- /ko -->
    </fieldset>

    <div class="admin__data-grid-filters-footer">
        <div class="admin__footer-main-actions">
            <button
                class="action-tertiary"
                type="button"
                data-action="grid-filter-cancel"
                data-bind="click: $data.cancel.bind($data), closeCollapsible">
                <span data-bind="i18n: 'Cancel'"></span>
            </button>
            <button
                class="action-secondary"
                type="button"
                data-action="grid-filter-apply"
                data-bind="click: $data.apply.bind($data), closeCollapsible">
                <span data-bind="i18n: 'Apply Filters'"></span>
            </button>
        </div>
    </div>
</div>
